<template>
    <div class="boxs">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="orderId" prop="name">
                    <el-input v-model="queryParams.orderId" placeholder="Please fill in the order id" clearable
                        size="small" />
                </el-form-item>
                <el-form-item :label="$t('upload.updateTime')">
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        :start-placeholder="$t('table.start')" :end-placeholder="$t('table.end')" @change="timeChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small"
                        @click="handleQuery">{{ $t('table.search') }}</el-button>
                    <el-button icon="el-icon-refresh" size="small"
                        @click="resetQuery">{{ $t('table.reset') }}</el-button>
                </el-form-item>
            </el-form>
            <div class="flex_between">
                <div>RequestRecord</div>
            </div>
            <el-table border :data="moreArr" style="margin-top: 15px" v-loading="loading">
                <el-table-column label="index" align="center" width="60" type="index" />
                <el-table-column label="pk" align="center" prop="pk" />
                <el-table-column label="orderId" align="center" prop="orderId" />
                <el-table-column label="uuid" align="center" prop="uuid" />
                <el-table-column label="email" align="center" width="180" prop="email" />
                <el-table-column label="update_date" align="center" width="180" prop="update_date">
                </el-table-column>
                <el-table-column :label="$t('feedback.operate')" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Check</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
        </el-card>

        <el-dialog :title="$t('feedback.operate')" :visible.sync="dialogVisible" width="800px">
            <el-form class="demo-form-inline" label-width="140px" :model="form" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="pk" prop="pk">
                            <el-input disabled v-model="form.pk" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="orderId">
                            <el-input disabled v-model="form.orderId" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="uuid" prop="name">
                            <el-input disabled v-model="form.uuid" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="email">
                            <el-input disabled v-model="form.email" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.images">
                        <el-form-item label="images">
                            <el-image v-for="(item, k) in form.imagesList" :key="k"
                                style="width: 150px; height: 150px;margin-right: 10px;border-radius: 4px;" :src="item"
                                :preview-src-list="form.imagesList">
                            </el-image>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="state">
                            <el-radio v-model="form.state" label="1">{{ $t('feedback.Yes') }}</el-radio>
                            <el-radio v-model="form.state" label="2">{{ $t('feedback.No') }}</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.state=='1'">
                    <el-col :span="12">
                        <el-form-item label="token" prop="token">
                            <el-input v-model="form.token" placeholder="Please enter token" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.state == '2'">
                    <el-col :span="24">
                        <el-form-item label="reason" prop="reason">
                            <el-input :autosize="{ minRows: 4 }" type="textarea"  v-model="form.reason"
                                placeholder="Please enter reason" resize="none" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('tagsView.close') }}</el-button>
                <el-button type="warning" @click="affirm">{{ $t('table.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getApplicationList, restoreUserSubscriptionStatus } from "@/api/SubscriptionRevive";

import pk from "@/utils/pk";
export default {
    name: "RequestRecord",
    data() {
        return {
            queryParams: {
                page: 1,
                size: 10,
                dateRange: {
                    start: "",
                    end: "",
                },
                type: "",
            },
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible: false,
            form: {
                description: "",
                file: "",
            },
            search: "",
            rules: {
                token: [
                    { required: true, message: "Please enter token", trigger: "blur" },
                ],
                reason: [{ required: true, message: "Please enter reason", trigger: "blur" }],
            },
            value1: "",
        };
    },
    created() {
        this.getMore();
    },
    methods: {
        uploadHandel(e) {
            this.form.file = e.file;
            console.log(e, "this.form.file");
            console.log(this.form.file, "this.form.file");
        },
        remeveFile() {
            this.form.file = "";
        },
        timeChange() {
            this.queryParams.dateRange.start = this.value1[0];
            this.queryParams.dateRange.end = this.value1[1];
            this.handleQuery();
        },
        getKeyByValue(object, value) {
            return Object.keys(object).find((key) => object[key] === value);
        },
        async getMore() {
            this.loading = true;
            let { data, total } = await getApplicationList(this.queryParams);
            this.loading = false;
            this.moreArr = data;
            this.total = total;
        },

        handleQuery() {
            this.queryParams.page = 1;
            this.getMore();
        },
        async affirm() {
            this.$refs["ruleForm"].validate(async (valid) => {
                if (!valid) return;
                try {
                    this.addLoading = true;
                    await restoreUserSubscriptionStatus(this.form);
                    this.addLoading = false;
                    this.$message.success("操作成功");
                    this.getMore();
                    this.dialogVisible = false;
                } catch (e) {
                    this.addLoading = false;
                }
            });
        },
        openDialog() {
            this.form = {};
            this.dialogVisible = true;
        },
        handleEdit(i, row) {
            if (row.images) {
                row.imagesList = row.images.split('|')
            }
            if (row.state == '0') {
                row.state ='1'
            }
            this.form=row
            if (this.$refs.upload) {
                this.$refs.upload.clearFiles(); // 清除文件列表
            }
            this.dialogVisible = true;
        },
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(async () => {
                await deleteTemplateType({ id: row.id });
                this.getMore();
                this.$message({
                    message: "删除成功！",
                    type: "success",
                });
            });
        },
        resetQuery() {
            this.queryParams.state = null;
            this.queryParams.package_name = null;
            this.queryParams.dateRange.start = null;
            this.queryParams.dateRange.end = null;
            this.queryParams.page = 1;
            this.value1 = "";
            this.getMore();
        },
    },
};
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}

::v-deep.el-input.is-disabled .el-input__inner {
    color: #333 !important;
}

::v-deep.el-textarea.is-disabled .el-textarea__inner {
    color: #333 !important;
}

::v-deep .el-upload {
    width: 100% !important;
}

::v-deep .el-upload-dragger {
    width: 100% !important;
}
</style>